<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MAKE</title>
    <th:block th:replace="~{layouts/common::form}"></th:block>
</head>
<body>
<div id="app">
    <el-form :model="form" label-width="auto" style="min-width: 1300px">
        <el-row>
            <el-col :span="6">
                <el-form-item label="数据表">
                    <el-select v-model="form.tableName" placeholder="请选择数据表" clearable @change="selectTableName">
                        <el-option v-for="item in tables" :value="item.tableName" >
                            <span >{{ item.tableName }} ({{ item.tableComment }})</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="模块">
                    <el-autocomplete v-model="form.moduleName"  :fetch-suggestions="moduleQuerySearch" clearable> </el-autocomplete>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="包名">
                    <el-autocomplete v-model="form.packageName"  :fetch-suggestions="packageQuerySearch" clearable> </el-autocomplete>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item>
                    <el-button type="primary" @click="make">生成</el-button>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="创建类型">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="Controller" value="Controller" ></el-checkbox>
                <el-checkbox label="Service" value="Service" ></el-checkbox>
                <el-checkbox label="Entity" value="Entity" ></el-checkbox>
                <el-checkbox label="Mapper" value="Mapper" ></el-checkbox>
                <el-checkbox label="UI" value="UI" ></el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-table :data="form.columns">
            <el-table-column prop="columnName" label="字段名" width="180" >
                <template #default="scope">
                    <el-input v-model="scope.row.columnName"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="columnComment" label="字段描述" width="180" >
                <template #default="scope">
                    <el-input v-model="scope.row.columnComment"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="formType" label="表单类型" width="180" >
                <template #default="scope">
                    <el-select v-model="scope.row.formType" placeholder="请选择表单类型" clearable >
                        <el-option v-for="item in formTypes" :label="item.label" :value="item.value" ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="listType" label="列表类型" width="180" >
                <template #default="scope">
                    <el-select v-model="scope.row.listType" placeholder="请选择列表类型" clearable >
                        <el-option v-for="item in listTypes" :label="item.label" :value="item.value" ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="expand" label="拓展信息"  >
                <template #default="scope">
                    <el-select v-model="scope.row.expand" :reserve-keyword="false" allow-create filterable default-first-option placeholder="拓展信息" clearable multiple></el-select>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
</div>
</body>
<script th:inline="javascript">
    let { ref, reactive} = Vue;
    let { ElMessage, ElLoading } = ElementPlus;
    app.create("#app", {
        setup(){
            const tables = [[${tableList}]];
            const packageList = [[${packageList}]];
            const moduleList = [[${moduleList}]];

            const form = reactive({
                tableName: '',
                tableComment: '',
                moduleName: '',
                packageName: '',
                type: [],
                columns: []
            });
            const formTypes = [
                {label: '文本框', value: 'input'},
                {label: '下拉框', value: 'select'},
                {label: '日期选择', value: 'date'},
                {label: '富文本', value: 'editor'},
                {label: '图片上传', value: 'image'},
                {label: '文件上传', value: 'upload'},
                {label: '多选框', value: 'checkbox'},
                {label: '单选框', value: 'radio'},
                {label: '开关', value: 'switch'},
                {label: '文本域', value: 'textarea'},
                {label: '下拉树', value: 'tree'},
            ];
            const listTypes = [
                {label: '文本', value: 'text'},
                {label: '图片', value: 'img'},
            ];

            const selectTableName = (value) => {
                layui.jquery.ajax({
                    url: '/admin-base/system/get-table-column',
                    type: 'get',
                    data: {
                        tableName: value
                    },
                    success: function (res) {
                        form.columns = res.data.map(item => {
                            item.formType = 'input';
                            item.listType = 'text';
                            expandHandle(item);
                            return item;
                        });
                    }
                });

                tables.forEach(item => {
                    if (item.tableName === value) {
                        form.tableComment = item.tableComment;
                    }
                });
            }
            
            const expandHandle = (column) => {
                column.expand = [];
                if (/_id$/.test(column.columnName)){
                    column.expand.push(column.columnName.substring(0, column.columnName.length - 3) + ":id=id");
                }
                if (column.columnComment.includes(':') || column.columnComment.includes('：')) {
                    let comment = column.columnComment.replaceAll("：", ':').replaceAll("，", ',');
                    console.log(comment)
                    column.expand.push(...comment.split(':')[1].split(','));
                    column.columnComment = comment.split(':')[0];
                }
            }

            return {
                form,
                tables,
                formTypes,
                listTypes,
                packageList,
                moduleList,
                selectTableName,
                make(){
                    let load = ElLoading.service('正在生成中，请稍后...');
                    layui.jquery.ajax({
                        url: '/admin-base/system/make-curd',
                        type: 'post',
                        data: JSON.stringify(form),
                        contentType:'application/json',
                        success: function (res) {
                            if (res.code === 200) {
                                ElMessage.success(res.data.join('\n'));
                            }else{
                                ElMessage.error(res.message);
                            }
                        },
                        error: function (res) {
                            ElMessage.error(res.responseJSON.message);
                        },
                        complete: function () {
                            load.close();
                        }
                    })
                },
                packageQuerySearch(value, cb){
                    let res = [];
                    packageList.forEach(item => {
                        res.push({value: item})
                    });
                    if (value === '') {
                        return cb(res);
                    }
                    cb(res.filter(item => {
                        return item.value.toLowerCase().indexOf(value.toLowerCase()) > -1;
                    }));
                },
                moduleQuerySearch(value, cb){
                    let res = [];
                    moduleList.forEach(item => {
                        res.push({value: item})
                    });
                    if (value === '') {
                        return cb(res);
                    }
                    cb(res.filter(item => {
                        return item.value.toLowerCase().indexOf(value.toLowerCase()) > -1;
                    }));
                }
            }
        }
    });
</script>
</html>